<style scoped lang="scss">
::v-deep {
    .el-menu.el-menu--inline {

        .el-menu-item,
        .el-submenu__title {
            background: #1f2d3d !important;
        }

        .el-menu-item:hover {
            background: #001528 !important;
        }

    }


    .el-submenu__title:hover {
        // background-color: rgb(21, 29, 39);
    }




}
</style>
<template>
    <!-- 没有孩子 -->
    <el-menu-item :index="`${$props.item&&$props.item.id}`" v-if="!($props.item&&$props.item.haveNext)">
        <div @click="()=>selectMenu($props.item)">
            <svgIcon v-if="$props.item&&$props.item.img" :icon-class="$props.item&&$props.item.img"></svgIcon>
            <span style="padding-left:10px;">
                <!-- {{$props.item&&$props.item.id}} -->
                {{$props.item&&$props.item.name}}
            </span>
        </div>
    </el-menu-item>
    <!-- 存在孩子 -->
    <el-submenu :index="`${$props.item&&$props.item.id}`" v-else ref="elsubmenuref">
        <template slot="title">
            <div @click="()=>triggerLoadChid($props.item)">
                <svgIcon v-if="$props.item&&$props.item.img" :icon-class="$props.item&&$props.item.img"></svgIcon>
                <span style="padding-left:10px;">
                    <!-- {{$props.item&&$props.item.id}} -->
                    {{$props.item&&$props.item.name}}
                </span>
            </div>
        </template>
        <leftMenuItem v-on="$listeners"
            v-for="(child,childIndex) in $props.item&&$props.item.children" :item="child"
                      :key="child&&child.id"
            >
        </leftMenuItem>
    </el-submenu>
</template>
<script>
import * as AuthApi from '@/api/auth.api.js'
import { failRes, safeParseJson } from '@base/utils'
import svgIcon from '@base/svg-icon'

export default {
    data() {
        return {}
    },
    props: {
        item: [Object]
    },
    components: {
        svgIcon,
        leftMenuItem: () => import('@/components/leftMenuItem.vue')
    },
    methods: {
        selectMenu(menu) {
            this.$emit('selectMenu', menu)

        }
        ,
        async triggerLoadChid(menuitem) {
            if (!(menuitem && menuitem.id)) {
                return failRes('没有id')
            }
            var children = []
            children = safeParseJson(localStorage.getItem(`menu_v2_${menuitem && menuitem.id}`)) || []
            if (children && children.length <= 0) {
                var result = await AuthApi.authgetmenu(menuitem.id)
                if (!(result && result.success)) {
                    return failRes('没有 数据')
                }
                children = result && result.data || []

            }


            this.$props && this.$props.item && (this.$props.item.children =children);
            console.log('menu click get children', children);
            //缓存
            localStorage.setItem(`menu_v2_${menuitem && menuitem.id}`, JSON.stringify(children || []))

          this.$forceUpdate()


          //this.$refs['elsubmenuref'].addItem(children[0])
        /* setTimeout(()=>{
         },1000)*/
         //debugger
        }
    }
}
</script>
